import React, { Component } from 'react';
import phone1y from '../../../img1/phone1.png';
import phone1n from '../../../img1/phone1-n.png';
import phone2y from '../../../img1/phone2.png';
import phone2n from '../../../img1/phone2-n.png';
import phone3y from '../../../img1/phone3.png';
import phone3n from '../../../img1/phone3-n.png';
import yzm from '../../../img1/yanzhengma.png';
import { Button } from 'antd';
import $ from 'jquery'
import {
    CheckCircleFilled
} from '@ant-design/icons';
class phonexg extends Component {
    constructor(props){
        super(props);
        this.state={
            index:1
        }
    }
    next(){
        this.setState({
            index:this.state.index+1
        });
        if(this.state.index<2){
            $('#one').prop('src',phone1n);
            $('#three').prop('src',phone3n);
            $('#two').prop('src',phone2y);
        }else{
            $('#one').prop('src',phone1n);
            $('#three').prop('src',phone3y);
            $('#two').prop('src',phone2n);
        }
    }
    render() {
        return (
            <div className="phone-hb">
                <div className="right-mark">换绑手机</div>
                <div className="phone-hb-c">
                    <div className="phone-hb-c-t">
                        <img id="one" src={phone1y} alt=""/>
                        <img id="two" src={phone2n} alt=""/>
                        <img id="three" src={phone3n} alt=""/>
                    </div>
                    {this.state.index<=2?(
                    <div className="phone-hb-c-b">
                        <div>
                            <input placeholder="手机号" type="text"/>
                        </div>
                        <div>
                            <input placeholder="验证码" type="text"/>
                            <img src={yzm} alt=""/>
                            <a href="###">看不清楚换一张</a>
                        </div>
                        <div>
                            <input placeholder="手机验证码" type="text"/>
                            <Button type="primary">获取验证码</Button>
                        </div>
                        <button onClick={this.next.bind(this)}>提交修改</button>
                    </div>):(
                    <div className="phone-hb-c-b">
                        <div className="wancheng">
                        <CheckCircleFilled />&nbsp;&nbsp;&nbsp;<span>恭喜您修改成功</span>
                        </div>
                    </div>
                )}
                </div>
            </div>
        );
    }
}

export default phonexg;